<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		div.btngroup {
			border-style: solid
		}

		.ininner>li {
			background-color: #99ff99;
			float: left;
			border-style: 1px;
			margin: 5px;
			padding: 5px
		}

		div {
			float: left;
		}
	</style>
	<script>


		function myclick(idStr, fun) {
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}
		window.onload = function () {
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function () {
				// 查找#bj节点 getElementById
				var bj = document.getElementById('bj');
				alert(bj.innerHTML);
				console.log(bj)
			}
			var btn02 = document.getElementById("btn02");
			btn02.onclick = function () {

				/*************************** document对象调用*/
				// 查找所有li节点
				// getElementsByTagName 返回值：类数组对象，所有查询到的结果都封装在对象中
				var li = document.getElementsByTagName("li");
				console.log(li);
				// 
				// li.forEach(function(a,b){
				// 	console.log(b);
				// })
				for (var i = 0; i < li.length; i++) {
					console.log(li[i].innerHTML)
				}

			}
			var btn03 = document.getElementById("btn03");
			btn03.onclick = function () {

				// 查找name=gender的所有节点
				var inputs = document.getElementsByName('gender');
				console.log(inputs);
				for (var i = 0; i < inputs.length; i++) {
					// innerhtml获取元素内部的html代码 自结束标签没有内部
					//console.log(inputs[i].innerHTML);
					// 读取元素对象额的内部属性
					//但是class属性不可以 因为ass是js的关键字 可以使用className
					console.log(inputs[i].value);
					console.log(inputs[i].type);
				}
			}

			var btn04 = document.getElementById("btn04");
			btn04.onclick = function () {
				// 查找#city下的所有li节点	
				var city = document.getElementById('city');
				var lis = city.getElementsByTagName("li");
				console.log(lis);
				for (var index = 0; index < lis.length; index++) {
					console.log(lis[index].innerHTML)

				}
			}

			var btn05 = document.getElementById("btn05");
			btn05.onclick = function () {
				//// 查找#city所有子节点[元素节点 文本节点] ie8及其以下不会识别空白
				var city = document.getElementById('city');
				var lis = city.childNodes;
				console.log(lis.length);
				for (var index = 0; index < lis.length; index++) {
					console.log(lis[index].innerHTML)

				}
				var cns = city.children;
				// 获取当前元素的子元素【元素就是标签 不包括空包】
				console.log(cns)
			}

			var btn06 = document.getElementById("btn06");
			btn06.onclick = function () {
				// 返回#iphone的第一个子节点[包括空白]
				var iphone = document.getElementById('iphone');
				var lis = iphone.firstChild;
				console.log(lis);
				// firstElementChild【元素】不支持ie8以下
				var lis = iphone.firstElementChild;
				console.log(lis);
			}
			// var btn07 = document.getElementById("btn07");
			// btn07.onclick = function () {
			// 	// 返回#bj的父节点

			// }
			myclick("btn07", function () {
				// 返回#bj的父节点
				var bj = document.getElementById("bj");
				console.log(bj.parentNode.innerHTML)
				// 无标签
				console.log(bj.parentNode.innerText)

			})

			myclick("btn08", function () {
				// 返回#android的前一个兄弟节点
				var android = document.getElementById("android");
				console.log(android.previousSibling)
				//不支持ie8以下
				console.log(android.previousElementSibling)

			})

			myclick("btn09", function () {
				// 返回username的value属性
				var user = document.getElementById("username");
				console.log(user.value)


			})
			myclick("btn10", function () {
				// 设置username的value属性
				var user = document.getElementById("username");
				user.value = "llllll"
			})
			myclick("btn11", function () {
				// 返回#bj的文本值 
				var bj = document.getElementById("bj");
				alert(bj.innerHTML)
				var fc=bj.firstChild;
				alert(fc.nodeValue)
			})


		}

	</script>
</head>

<body>
	<div class="total">
		<div class="inner">
			<p>你喜欢那哪座城市</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			<br><br>
			你喜欢哪款单机游戏
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
			<br>
			<br>
			你手机的操作系统是
			<ul id="iphone">
				<li>IOS</li>
				<li id="android">Android</li>
				<li>Windows Phone</li>
			</ul>

			<div>
				gender:
				<input type="radio" name="gender" value="Male">
				<input type="radio" name="gender" value="Female">
				<br>
				name:
				<input type="text" name="name" value="abcde" id="username">
			</div>
		</div>
		<div class="btngroup">
			<br>
			<br>
			<button id="btn01">查找#bj节点</button><br><br>
			<button id="btn02">查找所有li节点</button><br><br>
			<button id="btn03">查找name=gender的所有节点</button><br><br>
			<button id="btn04">查找#city下的所有li节点</button><br><br>
			<button id="btn05">查找#city所有子节点</button><br><br>
			<button id="btn06">返回#iphone的第一个子节点</button><br><br>
			<button id="btn07">返回#bj的父节点</button><br><br>
			<button id="btn08">返回android的前一个兄弟节点</button><br><br>
			<button id="btn09">返回username的value属性</button><br><br>
			<button id="btn10">设置username的value属性</button><br><br>
			<button id="btn11"> 返回#bj的文本值</button><br><br>
		</div>
	</div>

</html>